<template>
  <view class="flex-col page">
    <view class="flex-col self-stretch">
      <MyHeader title="添加乘车人"></MyHeader>
      <view class="mt-4 flex-col section_4">
        <view class="flex-row items-center group_3">
          <text class="font">姓名</text>
          <input v-model="form.userName" class="ml-11" type="text" placeholder="请输入您的姓名" />
        </view>
        <view class="flex-row items-center group_4">
          <text class="font text_3">电话号码</text>
          <input v-model="form.userPhone" class="ml-11" type="number" placeholder="请输入您的电话号码" />
        </view>
      </view>
    </view>
    <view @click="addOrEdit" class="flex-col justify-start items-center self-center text-wrapper mt-203">
      <text class="font text_5">确定</text>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive
  } from 'vue'
  import {
    addRiderAPI,
    putRiderAPI
  } from '../../../../apis/taxi';
  import {
    useUserStore
  } from '../../../../store/useUserStore';
  import {
    onShow
  } from '@dcloudio/uni-app'
  const props = defineProps({
    // 0: 新增  1: 修改
    formP: {
      type: String,
      default: ''
    }
  })
  const form = reactive({
    userName: '',
    userPhone: ''
  })
  onShow(() => {
    if (props.formP) {
      Object.assign(form, JSON.parse(props.formP))
    }
  })

  const userStore = useUserStore()
  const addOrEdit = async () => {
    const phoneRegExp = /^1[3-9]\d{9}$/
    for (const key in form) {
      if (!form[key]) {
        return uni.showToast({
          title: '请完整填写信息',
          icon: 'error'
        })
      }
    }
    if (!phoneRegExp.test(form.userPhone)) {
      return uni.showToast({
        title: '手机号格式错误',
        icon: 'error'
      })
    }
    if (form.id) {
      await putRiderAPI({
        ...form,
        userId: userStore.userInfo.id
      })
      // 编辑
    } else {
      // 新增
      await addRiderAPI({
        ...form,
        userId: userStore.userInfo.id
      })
    }
    uni.navigateBack()
  }
</script>

<style>
  .ml-5 {
    margin-left: 10rpx;
  }

  .ml-11 {
    margin-left: 22rpx;
  }

  .mt-203 {
    margin-top: 406rpx;
  }

  .page {
    padding-bottom: 656rpx;
    background-color: #f7f8fa;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
  }

  .section {
    padding: 36rpx 12rpx 42rpx 34rpx;
    background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
  }

  .group {
    padding-left: 36rpx;
    padding-right: 16rpx;
  }

  .text {
    color: #333333;
    font-size: 30rpx;
    font-family: SFProText;
    font-weight: 600;
    line-height: 21.78rpx;
  }

  .image {
    width: 34rpx;
    height: 22rpx;
  }

  .image_2 {
    width: 30rpx;
    height: 22rpx;
  }

  .image_3 {
    width: 48rpx;
    height: 22.66rpx;
  }

  .group_2 {
    padding: 20rpx 0 12rpx;
  }

  .image_4 {
    width: 18rpx;
    height: 34rpx;
  }

  .pos_2 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .text_2 {
    color: #333333;
    font-size: 36rpx;
    font-family: SourceHanSansCN;
    line-height: 33.7rpx;
    opacity: 0.9;
  }

  .section_2 {
    padding: 12rpx 24rpx;
    background-color: #ffffff99;
    border-radius: 50rpx;
    border-left: solid 1rpx #97979733;
    border-right: solid 1rpx #97979733;
    border-top: solid 1rpx #97979733;
    border-bottom: solid 1rpx #97979733;
  }

  .pos {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .image-wrapper {
    width: 38rpx;
  }

  .image_6 {
    width: 38rpx;
    height: 14rpx;
  }

  .section_3 {
    background-color: #33333333;
    width: 1rpx;
    height: 37rpx;
  }

  .image_5 {
    width: 34rpx;
    height: 34rpx;
  }

  .section_4 {
    margin: 0 30rpx;
    padding: 0 24rpx 48rpx;
    background-color: #ffffff;
    border-radius: 9.68rpx;
  }

  .group_3 {
    padding: 52rpx 20rpx 32rpx;
    border-bottom: solid 1rpx #e5e5e5;
  }

  .font {
    font-size: 32rpx;
    font-family: SourceHanSansCN;
    line-height: 29.5rpx;
    color: #333333;
  }

  .font_2 {
    font-size: 28rpx;
    font-family: SourceHanSansCN;
    line-height: 25.84rpx;
    color: #cccccc;
  }

  .group_4 {
    padding: 32rpx 20rpx;
    border-bottom: solid 1rpx #e5e5e5;
  }

  .text_3 {
    line-height: 29.38rpx;
  }

  .text_4 {
    line-height: 25.88rpx;
  }

  .text-wrapper {
    padding: 28rpx 0;
    background-color: #4c8eef;
    border-radius: 56rpx;
    width: 578rpx;
  }

  .text_5 {
    color: #ffffff;
    line-height: 30.04rpx;
  }
</style>